<template>
  <div class="advert-top" v-if="open">
    <img class="ico-horn" src="@/assets/images/notice.png" alt="" />
    <!-- 滚动文字区域 -->
    <div
      class="marquee-wrap"
      id="marquee-wrap"
      @mouseenter="handleMouseEnter"
      @mouseleave="handleMouseLeave"
    >
      <ul class="marquee-box" id="marquee-box">
        <li
          class="marquee-list"
          v-for="(item, index) in message"
          v-html="item.noticeContent"
          :key="item"
          :id="index == 0 ? 'marquee' : ''"
        ></li>
      </ul>
    </div>
    <i @click="close" style="margin: 0 10px" class="el-icon-close shou"></i>
  </div>
</template>
<script>
export default {
  props: {
    message: {
      type: Array,
      required: true,
    },
    open: Boolean,
  },
  data() {
    return {
      clock: "",
      disx: 0,
    };
  },
  watch: {
    open(e) {
      if (e) {
        // 延时滚动
        this.disx = 0;
        setTimeout(() => {
          this.runMarquee();
        }, 1000);
      } else {
        clearInterval(this.clock);
      }
    },
  },
  mounted() {},
  destroyed() {},
  methods: {
    close() {
      this.$emit("update:open", false);
    },
    handleMouseEnter() {
      clearInterval(this.clock);
    },
    handleMouseLeave() {
      this.runMarquee();
    },
    runMarquee() {
      // 获取文字 计算后宽度
      if (document.getElementById("marquee")) {
        var width = document
          .getElementById("marquee")
          .getBoundingClientRect().width;
      }
      var marquee = document.getElementById("marquee-box");
      if (document.getElementById("marquee-wrap")) {
        var marqueeWrapWidth = document
          .getElementById("marquee-wrap")
          .getBoundingClientRect().width;
      }

      // this.disx = 0; // 位移距离
      //设置位移
      console.log(width, marqueeWrapWidth);
      if (marquee.getBoundingClientRect().width > marqueeWrapWidth) {
        this.clock = setInterval(() => {
          this.disx--; // disx-=1; 滚动步长
          if (-this.disx >= marquee.getBoundingClientRect().width) {
            this.disx = marqueeWrapWidth; // 如果位移超过文字宽度，则回到起点  marquee-list的margin值
          }
          // marquee.style.transform = 'translateX(' + disx + 'px)'
          marquee.style.left = this.disx + "px";
        }, 30); //滚动速度
      }
    },
  },
};
</script>
<style lang="scss" scoped>
ul {
  margin: 0;
  padding: 0;
  border: 0;
}
li {
  list-style: none;
}
.advert-top {
  border-radius: 15px;
  position: relative;
  display: flex;
  width: 100%;
  height: 30px;
  background-color: rgba(40, 178, 139, 0.2);
  color: #28b28b;
  font-size: 14px;
  align-items: center;
}
.ico-horn {
  display: flex;
  margin: 0 5px 0 15px;
  width: 14px;
  height: 14px;
  justify-content: center;
  align-items: center;
}
.ico-horn > img {
  width: 30px;
  height: 30px;
}
/* 以下代码与滚动相关 */
.marquee-wrap {
  position: relative;
  display: flex;
  overflow: hidden;
  //   width: 1332px;
  flex: 1;
  height: 100%;
  line-height: 100%;
}
.marquee-box {
  position: absolute;
  top: 50%;
  display: flex;
  white-space: nowrap;
  transform: translateY(-50%);
}
.marquee-list {
  margin-right: 10px;
}
.marquee-list span {
  padding: 0 0.04rem;
  color: #ffe17b;
  font-weight: 700;
}
</style>